<template>
	<view>
		<view class="selectblock">
			<view class="buypopuptop">
				<view class="selectclose" @click="closepopup">
					<uv-icon size="26" color="#3D3D3D" name="close"></uv-icon>
				</view>
				<view class="selecttitle marginAuto">请选择需要分配的教练</view>
				<!-- <view class="search">
					<view class="searchmain marginAuto flex">
						<uv-icon style="margin-top:6rpx;" name="search" size="30" color="#999999"></uv-icon>
						<input class="searchinput" type="text" placeholder="请输入教练姓名~" />
					</view>
				</view> -->
			</view>
			<view class="jllist">
				<view class="jlitem marginAuto flex" v-for="(item,index) in orderdatas" :key="index" @click="selectpopfun(item,index)">
					<view class="jlitemse flex" :class="item.ac ? 'mainBg':''">
						<uv-icon class="marginAuto" name="checkmark" size="16" color="#fff"></uv-icon>
					</view>
					<view class="jlitemimg">
						<image v-if="!item.avatar" src="@/static/logo.png" mode=""></image>
						<image v-if="item.avatar" :src="apifun.URLimg+item.avatar" mode="widthFix"></image>
					</view>
					<view class="jlitemmsg">
						<view class="jlitemm-name flex">
							<view class="jlitemm-namem">{{ item.username }}</view>
							<view class="jlq">36岁</view>
						</view>
						<view class="jlitemmb">
							<view class="jlq">团队：{{ item.team }}</view>
						</view>
						<view class="jlitemmdoc">驾校：{{ item.school_name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "page-head",
		props: {
			orderdata: {
				type: Array,
				default: [{},{},{}]
			},
		},
		data() {
			return {
				apifun:this.apifun,
				orderdatas:this.orderdata,
				shopactive:{}
			};
		},
		onLoad() {
			this.URLimg = this.apifun.URLimg
		},
		methods: {
			closepopup(){
				this.$emit('closepopup',false)
			},
			selectpopfun(items,indexs){
				this.orderdatas.forEach((item,index)=>{
					this.$set(item,'ac',false);
				});
				this.$set(items,'ac',true);
				this.shopactive = items;
				this.$emit('acmsg',items)
			}
		},
	};
</script>

<style scoped lang="scss">
	.selectblock {
		height:1000rpx;
		overflow-y: scroll;
		position: relative;
		background: #F7F7F7;
		padding-bottom: 140rpx;
	}
	.buypopuptop{
		position: sticky;
		top: 0;
		left: 0;
		z-index: 30;
		border-radius: 20rpx;
		background: #F7F7F7;
		.selectclose{
			position: absolute;
			right:40rpx;
			top:40rpx;
		}
		.selecttitle {
			width: 100%;
			height: 110rpx;
			line-height: 110rpx;
			background-color: #fff;
			text-align: center;
			color: #333333;
			font-size: 32rpx;
			border-bottom: 1px solid #DCDCDC;
		}
		.search{
			width: 100%;
			padding: 20rpx 0;
			.searchmain{
				width: 630rpx;
				height: 50rpx;
				padding:20rpx 30rpx;
				border-radius: 100rpx;
				background:#FFFFFF;
				.searchinput{
					width: 80%;
					height: 50rpx;
					line-height: 50rpx;
					margin-left: 20rpx;
					font-size: 28rpx;
				}
			}
		}
	}
	// 列表
	.jlitem{
		position: relative;
		margin-top: 20rpx;
		width:690rpx;
		padding:10rpx 0;
		background: #fff;
		border-radius: 10rpx;
		.jlitemse{
			position: absolute;
			top: 40rpx;
			right: 30rpx;
			width:40rpx;
			height:40rpx;
			border-radius: 100rpx;
			background:#EAEAEA;
		}
		.jlitemimg{
			width: 180rpx;
			height: 180rpx;
			image{
				width: 180rpx;
				height: 180rpx;
				border-radius: 6rpx;
			}
		}
		.jlitemmsg{
			margin-left: 24rpx;
			width: 80%;
			.jlitemm-name{
				margin:0rpx 0 20rpx;
				.jlitemm-namem{
					color: #222222;
					font-size: 30rpx;
					line-height:40rpx;
					margin-right: 10rpx;
				}
				.jlq{
					display: inline-block;
					padding:0 10rpx;
					background:#EAF1FF;
					color:#1686F8;
					font-size:20rpx;
					border-radius:6rpx;
					height:40rpx;
					line-height:40rpx;
					margin-right: 10rpx;
				}
			}
			.jlitemmb{
				.jlq{
					display: inline-block;
					padding:0 10rpx;
					background:#FFEFE4;
					color:#FF720C;
					font-size:20rpx;
					border-radius:6rpx;
					height:40rpx;
					line-height:40rpx;
					margin-right: 10rpx;
				}
			}
			.jlitemmdoc{
				color:#666666;
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>